import React, { Component } from 'react'
import { Layout, Menu, } from 'antd';
import { withRouter } from 'react-router-dom'
import siderData, { filterSider } from "../configs/siderData"

const { SubMenu } = Menu;
const { Sider } = Layout;

class NavSider extends Component {


    //组件即将销毁的时候 移除他
    componentWillUnmount() {
        // console.log('componentWillUnmount--NavSider')
        localStorage.removeItem("defaultOpenKey");
    }
    clickMenuItem = ({ keyPath }) => {
        const path = keyPath[0];
        const defaultOpenKey = keyPath[1];
        if (defaultOpenKey) {
            localStorage.setItem("defaultOpenKey", defaultOpenKey)
        }
        //跳转： 
        this.props.history.push(path);
    }

    //侧边栏动态渲染
    renderMenu = (siderData) => {
        // console.log('siderData', siderData)
        return filterSider(siderData).map((item, index) => {
            const { subMenuKey, children, key, label, title, icon } = item;
            if (!children) {
                return <Menu.Item key={key}>{label}</Menu.Item>
            }
            return <SubMenu key={subMenuKey} icon={icon} title={title}>
                {
                    this.renderMenu(children)
                }
            </SubMenu>
        })
    }

    render() {
        const curPath = this.props.location.pathname;
        const defaultOpenKey = localStorage.getItem("defaultOpenKey")
        return (
            <div style={{ height: '100%' }}>
                <Sider width={200} className="site-layout-background" style={{ height: '100%' }}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={[defaultOpenKey]}
                        selectedKeys={[curPath]}
                        style={{ height: '100%', borderRight: 0, paddingTop: "30px" }}
                        onClick={this.clickMenuItem}
                    >
                        {/* <Menu.Item key="/main/home">首页</Menu.Item>
                        <SubMenu key="sub1" icon={<UserOutlined />} title="管理员管理">
                            <Menu.Item key="/main/adminsList">查看管理列表</Menu.Item>
                            <Menu.Item key="/main/addAdmin">新增管理员</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" icon={<CarOutlined />} title="车辆管理">
                            <Menu.Item key="/main/carsList">查看车辆列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" icon={<UserSwitchOutlined />} title="用户管理">
                            <Menu.Item key="/main/usersList">查看用户列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub4" icon={<UsergroupAddOutlined />} title="车主管理">
                            <Menu.Item key="/main/ownersList">查看车主列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub5" icon={<AccountBookOutlined />} title="订单管理">
                            <Menu.Item key="/main/ordersList">订单列表</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub6" icon={<BarChartOutlined />} title="评价管理">
                            <Menu.Item key="/main/remarkList">评价列表</Menu.Item>
                            <Menu.Item key="/main/remarkChart">评价图表</Menu.Item>
                        </SubMenu> */}
                        {
                            this.renderMenu(siderData)
                        }
                    </Menu>
                </Sider>
            </div>
        )
    }
}

export default withRouter(NavSider)